<template>
  <div>
    <div class="list-select-wrapper">
      <ul class="list-select">
        <li
          :class="['list-item',selectIndex===index? 'selected':'' ]"
          v-for="(item,index) in list"
          :key="index"
          @click="confirm(index)"
        >{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selectIndex: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    confirm(index) {
      this.$emit(
        "confirmIndex",
        index !== undefined ? index : this.selectIndex
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.list-select-wrapper {
  z-index: 9999;
  position: relative;
  background: #fff;
  .list-select {
    width: 142px;
    .list-item {
      height: 100%;
      height: 28px;
      background: #888;
      font-weight: bold;
      font-size: 13px;
      line-height: 28px;
      text-align: center;
      color: #ffffff;
      margin-top: 3px;
      cursor: pointer;
      &.selected {
        background: #000;
      }
    }
  }
}
</style>